import axios from 'axios';
import React, { useEffect, useMemo, useState } from 'react'

 function useList(){          //自定义hook函数必须以use开头，后面的单词收字母一定要大写！
    const [list, setlist] = useState([]);
    useEffect(()=>{
        axios({
          url:'https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=3293880',
          headers:{
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"165294070798642513887233","bc":"110100"}',
            'X-Host': 'mall.film-ticket.cinema.list'
          }
        }).then(res => {
          setlist(res.data.data.cinemas);
        })
      },[])
      console.log(list)
      return list;
}

function useDatalist(text, list){
    var datalist = useMemo(()=>list.filter(item => item.name.toUpperCase().includes(text.toUpperCase())||item.address.toUpperCase().includes(text.toUpperCase())
      ),[list,text]);
    
    return datalist;
}

export default function App() {
  const [text, settext] = useState('');

  const list = useList();
  
  const datalist = useDatalist(text,list)
  
  let handleChange = (evt) =>{
    settext(evt.target.value);
  }
  return (
    <div>
      <input onChange={handleChange}></input>
      <ul>
      {datalist.map(item =>
        <li key={item.cinemaId}>{item.name}</li>)}
      </ul>
    </div>
  )
}